<template>
  <div>
    <el-button @click="dongqilai"> 点击切换 </el-button>
    <div ref="div" class="radar-echart"></div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
const option = {

  // title: {
  //   text: '基础雷达图'
  // },
  // 数据指示器
  tooltip: {},
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '考勤', max: 100 },
      { name: '工作效率', max: 100 },
      { name: '摸鱼', max: 100 },
      { name: '积极性', max: 100 },
      { name: '学习能力', max: 100 },
      { name: '编码能力', max: 100 }
    ]
  },
  series: [{
    name: '预算 vs 开销（Budget vs spending）',
    type: 'radar',
    data: [
      // 动态添加  接口获取的数据
    ]
  }]
}

export default {

  mounted () {
    this.tubiao()
  },
  beforeDestroy () {
    // 关闭定时器
    clearInterval(this.asd)
  },
  methods: {
    // 点击事件
    dongqilai () {
      // 先清除定时器
      clearInterval(this.asd)
      // 设置定时器
      this.asd = setInterval(this.chang, 1000)
    },
    chang () {
      // 造假数据
      const data = []
      // 生成人的数据
      for (let i = 0; i < 3; i++) {
        const item = { name: `李${i}`, value: [] }
        // 生成value数据
        for (let j = 0; j < 6; j++) {
          item.value.push(Math.floor(Math.random() * 100 + 1))
        }
        data.push(item)
      }
      // 添加新数据
      option.series[0].data = data
      // setOption绘制图表
      this.myChart.setOption(option)
    },
    // 绘制图表
    tubiao () {
      this.myChart = this.echarts.init(this.$refs.div)
      // 添加数据
      option.series[0].data = [
        {
          value: [10, 20, 30, 40, 50, 66],
          name: '李四'
        },
        {
          value: [30, 100, 5, 20, 55, 80],
          name: '王五'
        }
      ]
      // 绘制图表
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
.radar-echart {
  width: 100%;
  height: 400px;
}
</style>
